<template>
	<view v-show="show" class="container">
		<view class="flex_center">
			<view class="toast-box">
				<slot>
					<text class="text">
						<u-icon v-show="obj.type === 'success'" class="icon" name="checkmark-circle-fill" color="#fff" size="32rpx"></u-icon>
						<u-icon v-show="obj.type === 'error'" class="icon" name="close-circle-fill" color="#fff" size="32rpx"></u-icon>
						{{ obj.content }}
					</text>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"common-toast",
		props: {
			toast: {
				type: Object
			}
		},
		watch: {
			toast: {
				handler(newVal) {
					if (newVal && newVal.content) {
						this.obj = { ...newVal };
						this.show = true;
						this.time && clearTimeout(this.time);
						this.time = setTimeout(() => {
							this.show = false;
							clearTimeout(this.time);
							this.time = null
						},this.obj.duration || 1500);
					}
				},
				deep: !0,
				immediate: !0
			}
		},
		data() {
			return {
				time: null,
				obj: {},
				show: false,
			};
		}
	}
</script>

<style lang="less">
.container {
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 999;
	
	& > .flex_center {
		height: 100%;
	}
	.toast-box {
		background-color: rgba(0, 0, 0, 0.6);
		padding: 20rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		max-width: 400rpx;
		color: #fff;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		.icon {
			display: inline-block;
			margin-right: 8rpx;
		}
	}
}
</style>